$basePX:16;
$scale:0.85;
$timer-text:1.5s;

$green-light:#2f9972;
$green-dark: #144030;
$error: #eb0000;
body{
    @if($DEBUG == true){
        @include debugmessage("Default media fired", "yellow");
    }
}

/***************** SETTING WIDTH FOR HEADER - CONTENT - FOOTER  ********************/
.header,
.content,
.slider,
.navigation,
.footer{width:960px; margin:0px auto; padding:0; }

.tpl-padding{ padding: 15px 0;}
.gradient-1{
    @include border-radius(6px);
    // needs latest Compass, add '@import "compass"' to your scss
    background-color: #39b08b; // Old browsers
    @include filter-gradient(#39b08b, #247a57, vertical); // IE6-8
    // IE9 SVG, needs conditional override of 'filter' to 'none'
    $experimental-support-for-svg: true;
    @include background-image(linear-gradient(top,  #39b08b 0%,#247a57 100%));
}
/***************** HEADING ********************/

h1.heading{
    color: #fff9e5;
    font-size: 32px;
    line-height: 39px;
    text-transform: uppercase;
    font-style: italic;
    font-weight: 900;
}
h2.heading{
    font-size: 17px;
    font-weight: 900;
    color: $green-light;
    margin: 0;
    margin-bottom: 10px;
    text-transform: uppercase;
}
h2.heading-icon{
    font-size: 17px;
    font-weight: 900;
    padding-left: 30px;
    color: $green-light;
    margin: 0;
    margin-bottom: 10px;
    text-transform: uppercase;
}
p.heading{
    font-size: 18px;
    font-style: italic;
    font-weight: 900;
    color: #fff9e5;
    line-height: 26px;
}
/**************** HEADER ********************/
.header{ position: relative; z-index: 1;}
#menu-fix{
    position: fixed; z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
}
#max-header{
    @include bg('ptHeader.png',0,0,repeat-x);
}

.header{
    height: 91px;
    #logo{
        float: left;
        margin-top: 20px;
        width: 192px; height: 52px;
        a{
            display: block;
            text-indent: -9999px;
            width: 192px; height: 52px;
            @include bg('imgLogo.png');
        }
    }
    #social-header{
        float: right;
        margin-top: 35px;
        #client-login{
            float: right;
            margin: 15px 0 0 25px;
            font-size: 12px;
            color: #FFF;
            @include bg('iconUser.png',left,center);
            padding-left: 20px;
            &:hover{
                color: $green-dark;
            }
        }
    }

}
#header-login{
    position: absolute; z-index: 10;
    top: 15px;
    right: 0;
    ul#lstLogin{
        margin: 0; padding: 0;
    }
    li{
        float: left;
        // margin-left: 10px;
        border-right: 1px solid white;
        a{
            display: block;
            padding: 0 10px;
            color: #FFF;
            font-size: 12px;
            &.active, &:hover{
                color: $green-dark;
            }
        }
        &:last-child, &.last{ border-right: none; }
    }
}
#lstSocial{
    float: left;
    li{
        float: left;
        margin-right: 8px;
    }
    a{
        display: block;
        text-indent: -9999px;
        @include bg('imgSocial.png',0,0);
        width: 17px; height: 16px;
        &#s-facebook{ background-position: 0 0;}
        &#s-linkin{ background-position: -20px 0;}
        &#s-twitter{ background-position: -41px 0;}
        &#s-youtube{ background-position: -62px 0;}
        &#s-rss{ background-position: -83px 0;}
    }
}
/***************** Navigation ********************/
#max-navigation{
    @include bg('ptGreen2.png',0,0,repeat);
    border-top: 1px solid #62af92;
}
.navigation{
    ul#main-nav{
        position: relative; z-index: 1;
        li{
            float: left;
            margin-right: 26px;
            &:hover{
                .submenu{ display: block; }
            }
            a{
                display: block;
                font-size: 12px;
                line-height: 49px;
                text-transform: uppercase;
                font-weight: 700;
                color: #FFF;
                &.active, &:hover{ color: $green-dark; }
            }
        }

    }
    .submenu{
        display: none;
        position: absolute; z-index: 10;
        left: 0;
        top: 49px;
        width: 100%;
        //&.active{ display: block; }
    }
    #nav-search{
        position: relative; z-index: 1;
        float: right;
        margin-top: 9px;
        input{
            background-color: #FFF;
            border: 1px solid #FFF;
            color: #acd0c0;
            padding: 0 40px 0 5px;
            width: 178px;
            line-height: 30px;
            font-size: 12px;
            height: 30px;
        }
        #header-search{
            display: block;
            @include bg('iconSearch.png',10px,8px);
            width: 32px; height: 32px;
            position: absolute; z-index: 10;
            right: 0; top: 0px;
            text-indent: -9999px;
        }

    }
}
#max-submenu{
    background-color: #27805f;
    height: 49px;
    width: 100%;
    display: none;
}
/***************** SLIDER HOMEPAGE ********************/
.camera_pag{
    position: absolute; z-index: 100;
    left: 50%;
    bottom: 0;
}
.camera_wrap{
    .camera_pag{
        .camera_pag_ul{
            li{
                @include bg('imgCircle.png');
                width: 9px;
                height: 10px;
                &:hover, &.cameracurrent{
                    background-position: -16px 0;
                }
                border-radius: none;
                & > span{
                    display: none;
                }
            }
        }
    }
}
#head-temp{ display: block; height: 141px; width: 100%;}
#max-slider-homepage{ border-bottom:6px solid #2a8865; height: 300px;  }
#slider-home{ margin-bottom: 0 !important; }
.eachSlide{ display: block; height: 300px;}
.home-slide-content{
    margin-top: 90px !important;
    h1{
        font-weight: 900;
        font-size: 35px;
        display: inline;
        line-height: 45px;
        margin: 0;
        @include bg('bgWhite80.png',0,0,repeat);
    }
    .btnLookmore{
        //@include bg('bgWhite80.png',0,0,repeat);
        width: 135px;
        color: #FFF;
        margin-top: 1px;
        font-size: 18px;
        font-weight: 700;
        display: inline-block;
        padding: 4px 7px;
        span{
            margin: 5px 5px 0 0;
            text-indent: -9999px;
            //@include bg('iconEye2.png');
            width:23px;
            height: 16px;
            float: left;
            display:block;
        }
    }
}
/***************** COLUMN PART ********************/
.col-1{ float: left; width: 225px; margin-right: 20px;}
.col-2{ float: left; width: 470px; margin-right: 20px;}
.col-3{ float: left; width: 715px; margin-right: 20px;}
.col-4{ width: 960px; }
.col-last{ margin-right: 0px;}
/***************** INTRO PART ********************/
#homepage-tpl{
    display: block;
}
#section-why{}

#box-intro{
    text-align: center;
    position: relative; z-index: 1;
    overflow: hidden;
    // height: 110px;
    h1{
        // position: relative;
        // z-index: 10;
        // top: -10px;
        // left: 36%;
        font-weight: 900;
        font-size: 30px;

        color: $green-light;
        margin:0 0 10px 0;
        text-transform: uppercase;
    }
    p{
        font-weight: 300;
        line-height: 26px;
        font-size: 20px;
    }
}
.video-text{
    display: block;
    margin-top: 38px;
    h3{
        font-weight: 700;
        margin-bottom: 7px; font-size: 18px;
        color: $green-light;
    }
    p{ }
    &#video-left{ text-align: right;}
    &#video-right{ text-align: left;}
}

/***************** PARTNERSHIP ********************/
.max-lightbg{
    background-color: #FFF;
}
#section-partner{
    display: block;
}

#partner-left{
    h3{
        font-weight: 300;
        font-size: 18px;
        line-height: 23px;
    }
    p{}
    a{ font-weight: bold; }
    a#p-l-readmore{
        font-weight: 700;
        padding-left: 20px;
        color: $green-light;
        font-size: 14px;
        display: block;
        margin-bottom: 15px;
        background-position: 0 5px;
        &:hover{ color: $green-dark; }
    }
    #partner-info{
        float: left;
        padding: 10px;
        h2, p{ margin: 0; color: #FFF;}
        h2{
            text-transform: uppercase;
            font-size: 18px;
            font-weight: bold;
        }
        p{
            padding: 5px 0 5px 23px;
            font-size: 14px;
            &#p-i-1{
                background-position: 0 11px;
                a{ color: #FFF;
                    &:hover, &:visited{ color: #FFF; text-decoration: underline; }
                }
            }
            &#p-i-2{
                background-position: 0 8px;
            }
        }
    }
}
#partner-right{
    position: relative; z-index: 1;
    min-height: 370px;
    img{
        display: block;
        position: absolute; z-index: 1;
    }
    span, a#video-icon{ position: relative; z-index: 100;}
    span{
        @include bg('bgWhite80.png',0,0,repeat);
        font-size: 30px;
        line-height: 38px;
        margin: 2px 0 0 43px;
        display: inline-block;
        color: $green-light;
        line-height: 35px;
        padding: 3px 10px;
        &#first{
            margin-top: 100px;
        }
    }
    a#video-icon{
        margin: 5px 0 0 43px;
        padding: 5px 10px 5px 40px;
        font-size: 18px;
        font-weight: 700;
        display: inline-block;
        background-position: 10px 11px;
        color: #FFF;
        background-color:$green-dark;
    }
}
/***************** EDUTCATE  ********************/
#educate-tpl{
    display: block;
}
#educate-intro{
    margin-bottom: 15px;
    h1{
        margin-top: 0;
        text-align: center;
        font-size: 26px;
        color: $green-light;
        font-weight: 900;
        font-size: 18px;
        text-transform: uppercase;
        margin-bottom: 7px;
        background-position: 385px 4px;
    }
    p{ font-size: 18px; text-align: center; margin-bottom: 20px;}
}
#edu-left, #edu-right, #edu-mid{
    @include border-radius(6px);
    @include box-shadow(#a3a4a8 0 1px 0 0);
    background-color: #dbdbdb;
    text-align: center;
    min-height: 350px;
    h2{
        text-transform: uppercase;
        color:$green-light;
        font-weight: 900;
        font-size: 18px;
        margin: 10px 0;
    }
}
#edu-left{
    .edu-header{
        h2{
            background-position: 65px 4px;
        }
        padding: 10px;
        border-bottom: 1px solid #b9babb;
    }
    .edu-video{
        .edu-vid-left, .edu-vid-right{
            float: left;
            width: 202px;
            margin: 20px 0 10px 0;
        }
        .edu-vid-left{ margin:20px 20px 10px 20px;}
        a{
            display: block;
            border: 1px solid $green-dark;
        }
        h4{
            margin: 0;
            color: $green-light;
            font-size: 15px;
            margin: 3px 0;
            font-weight: bold;
            text-align:left;
        }
        p{ text-align:left; }
    }
}
#edu-mid, #edu-right{
    padding: 10px; @include box-sizing(border-box);
    .box-image{
        width: 82px;
        height: 82px;
        margin: 0 auto;
        margin-bottom: 15px;
    }
    .btnLearn-more{
        padding-left: 20px;
        font-weight: 700;
        color: $green-light;
        margin-top: 10px;
        background-position: 0 4px;
        &:hover{ color: $green-dark;}
    }
    p{
        margin-bottom: 20px;
    }
}
#edu-mid{
    .box-image{
        margin-top: 45px;
    }
}
#edu-right{
    .box-image{
        margin-top: 24px;
    }
}
/***************** QUESTION PART ********************/

#latest-blog{
    display: block;
    margin-top: 15px;
    #late-left{
        float: left; width: 120px;
        text-align: center;
        p{
            text-align: center;
            margin: 10px 0;
            strong{
                font-weight: 700;
                font-size: 15px;
                color: $green-light;
            }
        }
    }
    #late-right{
        float: left; width: 320px;
        margin-left: 25px;
        h3{
            margin: 0;
            color: $green-light;
            font-weight: bold;
        }
        h4{
            margin: 0;
            color: #333;
            font-size: 12px;
        }
        p{
        }
        a.btnReadfull{
            color: $green-light;
            font-weight: 700;
            padding-left: 20px;
            background-position: 0 4px;
            &:hover{
                color:$green-dark;
            }
        }
    }
}
#latest-question{
    display: block;
    margin-top: 15px;
    ul#list-support{
        margin: 0; padding: 0;
        li{ display: block; }
        a{
            font-weight: 700;
            display: block;
            padding: 4px 6px 4px 30px;
            font-size: 14px;
            color: $green-light;
            &:hover{ color: $green-dark; }
            &#li-1{ background-position: 6px 10px;}
            &#li-2{ background-position: 5px 10px;}
            &#li-3{ background-position: 10px 10px;}
            &#li-4{ background-position: 5px 10px;}
            &#li-5{ background-position: 5px 10px;}
        }
    }
}
/***************** WANTMORE ********************/
#max-more{
    background-color: #FFF;
    .wantmore-img{
        width: 80px;
        margin: 0 auto 15px;

    }
}
#wantmore-intro{
    text-align: center;
    h1{
        margin-top: 0;
        text-align: center;
        font-size: 26px;
        color: $green-light;
        font-weight: 900;
        font-size: 26px;
        text-transform: uppercase;
        margin-bottom: 50px;
    }
}
/***************** FOOTER ********************/
#max-footer{ border-top:1px solid #dedede; }
.footer{
    #footer-left{
        float: left;
    }
    #footer-right{
        float: right;
    }

}
#footer-left{
     #footer-copyright{
        float: left;
    }
    #footer-list{
        margin: 0; padding: 0;
        margin-bottom: 25px;
        li{
            float: left;
            margin-right: 15px;
            // border-right: 1px solid $green-light;
        }
        a{
            display: block;
            color: $green-light;
            &:hover{
                color: $green-dark;
            }
        }
    }
}
#footer-right{
    p{
        float: left; margin: 0;
    }
    ul#footer-follow{
        float: left;
        margin: 0;
        padding-left: 10px;
        margin-top: 2px;
        li{
            float: left;
            margin-right: 8px;
        }
        a{
            display: block;
            text-indent: -9999px;
            @include bg('imgSocial2.png',0,0);
            width: 17px; height: 16px;
            &#f-facebook{ background-position: 0 0;}
            &#f-linkin{ background-position: -20px 0;}
            &#f-twitter{ background-position: -41px 0;}
            &#f-youtube{ background-position: -62px 0;}
            &#f-rss{ background-position: -83px 0;}
        }
    }
}
/***************** FOOTER TOP ********************/
.footer-top{
    h2{
        font-size: 17px;
        font-weight: 900;
        color: $green-light;
        text-transform: uppercase;
        padding-left: 30px;
        margin: 0 0 10px 0;
        background-position: left center;
    }
    &#box-center{
        h2{
            background-position: 156px 4px;
            text-align: center;
        }
    }
}
.col-box{
    text-align: center;
    min-height: 175px;
    @include box-sizing(border-box);
    padding: 10px;
    h2,p, a { color: #FFF; }
    h2{
        margin-top: 0;
        font-size: 14px; font-weight: 700;
        text-transform: uppercase;
    }
    p{
        background-position: left center;
        &#pb-1{ background-position: 0 4px;}
        &#pb-2{ background-position: 25px 0;}
        &#pb-3{ background-position: 25px 4px;}
        &#pb-4{ background-position: 25px 3px;}
        &#pb-5{ background-position: 5px 4px;}
        &#pb-6{ background-position: 20px 0;}
    }
    a{
        &.box-learnmore{
            padding-left: 20px;
            background-position: 0 5px;
        }
        &:hover{
            text-decoration: underline;
        }
    }
}
/***************** TECHNOLOGY ********************/
#max-slider-2{
    @include bg('banner-1.jpg',0,0,repeat);
}

/***************** TEMPLATE ********************/
.a-frame{
    display: block; border: 1px solid $green-light;
    margin: 0 0 10px;
    img{
        display: block;
    }
}
.btnStyle-1{
    background-color: #1d6349;
    font-weight: bold;
    color: #FFF;
    text-align: center;
    padding: 6px 12px;
    font-size: 13px;
    @include border-radius(6px);
    &:hover{
        background-color: #3bb990;
        color: #FFF;
    }
    &:visited{ color: #FFF;}
}
.eachBlock-right{
    display: block;
    margin-bottom: 15px;
}
.tpl-left{
    h2{
        color: #333;
        font-style: italic;
        font-size: 13px;
        line-height: 1.45em;
        margin: 10px 0;
    }
    h3{
        color: $green-light;
        font-size: 26px;
        font-weight: 900;
        line-height: 34px;
        margin: 10px 0;
    }
    h4{
        color: $green-light;
        font-size: 18px;
        font-weight: bold;
        margin: 10px 0;
    }
    a{
        color: $green-light;
        font-weight: bold;
        &:hover{
            color:$green-dark;
        }
    }
}
/***************** FORM TEMPLATE ********************/
.tpl-form{
    @include box-sizing(border-box);
    padding: 20px;
    .input-checkbox{
        float: left;
        p,a { color: #FFF;}
        p{ margin: 0; }
        input{ float: left; margin-top: 4px; margin-right: 5px;}
        &#checkbox-register{ width: 210px;}
    }
}
.input-block{
    display: block;
    margin: 5px 0;
    position: relative; z-index: 1;
    &.ip-col-2{ float: left; width: 205px; margin-right: 20px; }
    &.col-last{ margin-right: 0; }
    label{
        display: block; margin-bottom: 4px;
        color: #FFF;
        font-size: 13px;
        font-weight: 700;
        cursor:default;
        &.red{ color: $error; }
    }
    input.f-input{
        border: 1px solid $green-light;
        background-color: #FFF;
        height: 35px;
        line-height: 35px;
        @include box-sizing(border-box);
        // @include box-shadow(#cdcdcd 0 4px 4px -4px inset);
        width: 100%;
        padding: 3px 5px;
        color: #666666;
        &.error{
            border-color:$error;
        }
        &.disable{
            background-color: #fef2b2;
        }
    }
    select.f-select{
        @include box-sizing(border-box);
        height: 35px;
        line-height: 35px;
        border: 1px solid $green-light;
        padding: 8px 10px;
        width: 100%;
        option{}
    }
    textarea{
        resize: none; overflow: auto;
        width: 100%;
        height: 120px;
        color: #666666;
        font-size: 14px;
        @include font-1();
        border: 1px solid #cbcbcb;
        padding: 5px;
        margin-bottom: 10px;
        @include box-sizing(border-box);
    }
}
.form-submit{
    margin: 5px 0;
    a{
        float: right;
        display: block; text-indent: -9999px;
        width: 87px;
        height: 32px;
        &.btnLogin{
            @include bt(0,0);
            &:hover{
                background-position: -93px 0;
            }
        }
        &.btnSave{
            @include bt(0,-39px);
            &:hover{
                background-position: -93px -39px;
            }
        }
        &.btnSubmit{
            @include bt(0,-77px);
            &:hover{
                background-position: -93px -77px;
            }
        }
        &.btnSend{
            @include bt(0, -115px);
            &:hover{
                background-position: -93px -115px;
            }
        }
    }
}
p#p-field{
    font-style: italic;
    font-weight: 700;
    font-size: 14px;
}
/***************** CONTACT ********************/
#contact-tpl{
    a{ color: $green-light;
        &:hover{
            color: $green-dark;
        }
    }
}
.breadcum{ display: block; margin-bottom: 10px;}
ul.lstBreadcum{
    margin: 0; padding: 0;
    margin-bottom: 5px;
    li{
        float: left;
        @include bg('imgArrow.png',left,center);
        a{
            display: block;
            padding: 0 10px;
            color: #666666;
            &:hover{
                text-decoration: underline;
                color: $green-dark;
            }
        }
        &:first-child, &.first{
            background: none;
            a{ padding-left: 0; }
        }
    }
}
#lstRelateArticle{ display: block; }
ul#listArticle{
    li{
        display: block;
        @include bg('iconarrow.png',left,center);
        padding-left: 10px;
        margin-bottom: 10px;
    }
    a{
        color: $green-light;
        &:hover{
            text-decoration: underline;
            color: $green-dark;
        }
    }
}
/***************** NEWSLETTER ********************/
/***************** HEADER ********************/
/***************** HEADER ********************/

/***************** ICON ********************/
.ig-people{ @include bg('iconPeople.png'); }
.ig-people2{ @include bg('iconPeople2.png'); }
.ig-mail{ @include bg('iconMail.png',0,3px); }
.ig-phone{ @include bg('iconPhone.png'); }
.ig-video{ @include bg('iconYoutube.png'); }
.ig-basket{ @include bg('iconBasket.png'); }
.ig-book{ @include bg('iconBook.png'); }
.ig-book2{ @include bg('iconBook2.png'); }
.ig-eye{ @include bg('iconEye.png'); }
.ig-facebook{ @include bg('iconFacebook.png'); }
.ig-message{ @include bg('iconMessage1.png'); }
.ig-message2{ @include bg('iconMessage2.png'); }
.ig-message3{ @include bg('iconMessage3.png'); }
.ig-search{ @include bg('iconSearch.png'); }
.ig-twitter{ @include bg('iconTwitter.png'); }
.ig-user{ @include bg('iconUser2.png'); }

.iw-mail{ @include bg('iconMail2.png'); }
.iw-phone{ @include bg('iconPhone2.png'); }
.iw-user{ @include bg('iconUser.png'); }
.iw-video{ @include bg('iconVideo.png'); }
.iw-twitter{ @include bg('iconTwitter2.png'); }
.iw-facebook{ @include bg('iconFacebook2.png'); }
.iw-eye{ @include bg('iconEye4.png'); }